<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>贰零-时代</title>
    <link rel="shortcut icon" href="images/J20_favicon.ico">
    <style>
        body {
            background-image: url("images/j20img1.jpg");
            background-repeat: no-repeat;
            background-size: 1530px 730px;
            box-sizing: border-box;
            overflow: -Scroll;
            overflow-x: hidden;
        }

        .img {
            position: absolute;
            top: 50px;
            left: 60px;
            width: 150px;
            height: 200px;
            background-image: url("images/j20img2.jpg");
            background-repeat: no-repeat;
            background-size: 150px 200px;
            border-radius: 10px;
            border: 1px solid silver;
            opacity: 60%;
        }

        .stage {
            perspective: 1600px;
            position: relative;
            left: 500px;
            top: 100px;
        }

        #box {
            width: 400px;
            height: 400px;
            transform-style: preserve-3d;
            animation-name: rotate-box;
            animation-duration: 10s;
            animation-timing-function: linear;
            animation-iteration-count: infinite;
        }

        #box:hover {
            animation-play-state: paused;
        }

        .kind {
            width: 200px;
            height: 200px;
            text-align: center;
            line-height: 200px;
            font-size: 50px;
            color: white;
            position: absolute;
            left: 200px;
            top: 200px;
        }

        .b1 {
            background: url("images/歼-20-1.jpg") no-repeat;
            background-size: 200px 200px;
            opacity: 80%;
            transform: rotateX(-90deg);
            transform-origin: bottom;
        }

        .b2 {
            background: url("images/歼-20-2.png") no-repeat;
            background-size: 200px 200px;
            opacity: 80%;
            transform: rotateX(90deg);
            transform-origin: top;
        }

        .b3 {
            background: url("images/歼-20-3.png") no-repeat;
            background-size: 200px 200px;
            opacity: 80%;
            transform: rotateY(90deg);
            transform-origin: right;
        }

        .b4 {
            background: url("images/歼-20-4.png") no-repeat;
            background-size: 200px 200px;
            opacity: 80%;
            transform: rotateY(-90deg);
            transform-origin: left;
        }

        .b5 {
            background: url("images/歼-20-5.png") no-repeat;
            background-size: 200px 200px;
            opacity: 80%;
            transform: translateZ(0);
        }

        .b6 {
            background: url("images/歼-20-6.png") no-repeat;
            background-size: 200px 200px;
            opacity: 80%;
            transform: translateZ(200px);
        }

        @keyframes rotate-box {
            0% {
                transform: rotateX(0deg) rotateY(0deg);
            }

            10% {
                transform: rotateX(0deg) rotateY(180deg);
            }

            20% {
                transform: rotateX(-180deg) rotateY(180deg);
            }

            30% {
                transform: rotateX(-360deg) rotateY(180deg);
            }

            40% {
                transform: rotateX(-360deg) rotateY(360deg);
            }

            50% {
                transform: rotateX(-180deg) rotateY(360deg);
            }

            60% {
                transform: rotateX(90deg) rotateY(180deg);
            }

            70% {
                transform: rotateX(0deg) rotateY(180deg);
            }

            80% {
                transform: rotateX(90deg) rotateY(90deg);
            }

            90% {
                transform: rotateX(90deg) rotateY(0deg);
            }

            100% {
                transform: rotateX(0deg) rotateY(0deg);
            }
        }
    </style>
</head>

<body>
    <div class="img"></div>
    <div class="stage">
        <div id="box">
            <div class="kind b1"></div>
            <div class="kind b2"></div>
            <div class="kind b3"></div>
            <div class="kind b4"></div>
            <div class="kind b5"></div>
            <div class="kind b6"></div>
        </div>
    </div>
    <audio autoplay="autoplay" loop="loop">
        <source src="media/高梨康治 - Spin and Burst.mp3" type="audio/mpeg">
        <source src="media/高梨康治 - Spin and Burst.ogg" type="audio/ogg">
        你的浏览器不支持 audio 标签 播放音频
    </audio>
</body>

</html>